<template name='iot'>
  {{> iotDeviceNav}}
  {{> iotFooter}}
</template>

<template name='iotDeviceNav'>
    <div class="container devnav">
      <div class="row">
        <h2><i class="fa fa-leaf logo"></i>The IoT Gateway</h2>
      </div>
      <div class="row" id="devices">
        {{#each devices}}
          <div class="col-xs-3 col-sm-2 col-md-1">
            <a href="/device/{{devid}}">
              <img src="images/devices/{{icon}}" style="background-color: {{statusColor}};">
              <h4>{{name}}</h4>
            </a>
          </div>
        {{/each}}
      </div>
  </div>
</template>

<template name='iotFooter'>
  <div class="container">
    <div class="row site-footer">
      <a href="https://github.com/jubolin/jubo-iot">
        <p class="text-center"> <strong>Source in GitHub</strong></p>
      </a>
    </div>
  </div>
</template>

<template name='iotDevice'>
  <div class="container">
    <hr class="featurette-divider">
    <div class="row">
      <div class="col-md-2">
        <a href="/"> <i class="fa fa-leaf fa-2x logo"></i></a>
      </div>

      <div class="col-md-offset-2">
        <div id="chart">

          <div id="controls">
            <div id="deviceIcon">
              <img class="actor-big" style="background-color:{{device.statusColor}};" src="images/devices/{{device.icon}}">
            </div>
            <div id="toPopover">
              <span class="actor-name" style="color:{{device.statusColor}};">{{device.name}}({{device.location}})</span>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>


